﻿@model Sheng.WeixinConstruction.Management.Shell.Models.MemberViewModel

@{
    ViewBag.MainMenu = "Member";
    ViewBag.LeftMenu = "Member";

    ViewBag.Title = "会员管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style type="text/css">
    .divGroupItem {
        padding-top: 7px;
        padding-bottom: 7px;
    }

        .divGroupItem:hover {
            cursor: pointer;
            background-color: #eeeeee;
            color: #ff6a00;
        }
</style>



<script language="javascript">

    var _currentGroupGuid;
    //当前分组的GroupId
    var _currentGroupId = -1;
    //分组
    var _groupList;

    //当前页
    var _currentPage = 1;

    $(document).ready(function ()
    {
        if (_online == false)
            return;

        loadMemberGroupList();
        loadMemberList();

        $("[keyenter]").keypress(function (e)
        {
            if (e.keyCode == 13)
            {
                loadMemberList();
            }
        });

        $('#selectMemberGroupList').change(function ()
        {
            var groupId = $(this).children('option:selected').val();
            if (groupId < 0)
            {
                return;
            }

            moveMemberToGroup(groupId);

            $(this).val("-1");
        });
    });

    function selectMemberGroup(groupGuid, groupId, groupName)
    {
        _currentGroupGuid = groupGuid;
        _currentGroupId = groupId;

        if (groupId <= 100)
        {
            $("#aRenameMemberGroup").hide();
            $("#aRemoveMemberGroup").hide();
        } else
        {
            $("#aRenameMemberGroup").show();
            $("#aRemoveMemberGroup").show();
        }

        //黑名单
        if (groupId == 1)
        {
            $("#btnBlockMember").val("移出黑名单");
        }
        else
        {
            $("#btnBlockMember").val("加入黑名单");
        }

        //已取消关注
        if (groupId == -2)
        {
            $("#btnBlockMember").hide();
            $("#selectMemberGroupList").hide();
        }
        else
        {
            $("#btnBlockMember").show();
            $("#selectMemberGroupList").show();
        }

        $("#spanCurrentGroupName").html(groupName);

        loadMemberList();
        renderGroupList();
    }

    function loadMemberGroupList()
    {
        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        $.ajax({
            url: "/Api/Member/GetMemberGroupList",
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR)
            {
                // alert(data);

                layer.close(loadLayerIndex);

                if (data.Success)
                {
                    _groupList = data.Data;
                    renderGroupList();

                } else
                {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest)
            {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function renderGroupList()
    {
        //下拉框
        $("#selectMemberGroupList").empty();

        $("#selectMemberGroupList").append("<option value='-1'>添加到</option>");

        $.each(_groupList, function (idx, obj)
        {
            if (obj.GroupId == 1)
                return;

            $("#selectMemberGroupList").append("<option value='" + obj.GroupId + "'>" + obj.Name + "</option>");
        });

        //右侧选择
        var gettpl = document.getElementById('memberGroupListTemplate').innerHTML;
        laytpl(gettpl).render(_groupList, function (html)
        {
            document.getElementById('divMemberGroupListContainer').innerHTML = html;
            fitTable();
        });
    }

    function loadMemberList(targetPage)
    {
        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        var args = new Object();
        args.Page = targetPage || 1;
        args.GroupId = _currentGroupId;
        args.NickName = $("#txtSearch_NickName").val();
        args.MobilePhone = $("#txtSearch_Mobile").val();

        $.ajax({
            url: "/Api/Member/GetMemberList",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR)
            {
                // alert(data);

                layer.close(loadLayerIndex);

                if (data.Success)
                {
                    var resultObj = data.Data;

                    _currentPage = resultObj.Page;

                    // alert(JSON.stringify(resultObj));
                    var gettpl = document.getElementById('memberListTableTemplate').innerHTML;
                    laytpl(gettpl).render(resultObj.ItemList, function (html)
                    {
                        document.getElementById('divTableBodyContainer').innerHTML = html;
                        fitTable();
                    });

                    laypage({
                        skin: 'yahei',
                        cont: document.getElementById('divPagingContainer'),
                        pages: resultObj.TotalPage, //总页数
                        curr: resultObj.Page, //当前页
                        groups: 7, //连续显示分页数
                        jump: function (obj, first)
                        {
                            if (!first)
                            { //点击跳页触发函数自身，并传递当前页：obj.curr
                                loadMemberList(obj.curr);
                            }
                        }
                    });

                } else
                {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest)
            {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function loadDataOnPageAndCloseLayer(layerIndex) {
        layer.close(layerIndex);
        loadMemberList(_currentPage);
    }

    function scrollHeader()
    {
        //TODO:divTableBodyContainer.scrollLeft
        // alert(divTableBodyContainer.scrollLeft);
        var ml = 0 - divTableBodyContainer.scrollLeft;
        document.getElementById("tableHeader").style.cssText = "margin-left:" + ml + "px;";
    }

    function fitTable()
    {
        $("#tableBody").width($("#tableHeader").width());

        $("#tableHeader tr:first").each(function (n, value)
        {
            $(this).find("td").each(function (n, value)
            {
                $("#tableBody tr:first td:eq(" + n + ")").width(value.width)
            });
        });
    }

    function syncUserList()
    {

        var confirmLayerIndex = layer.confirm("用户列表是自动保持与微信后台同步的，但您也可以在修改了服务器配置，或临时停止了微信后台的服务器配置之后，手动同步用户列表，是否立即开始同步？", {
            btn: ['确认', '取消'], //按钮
            shade: [0.4, '#393D49'],
            title: false,
            closeBtn: false,
            shift: _layerShift
        }, function ()
        {
            layer.close(confirmLayerIndex);

            var loadLayerIndex = layer.load(0, {
                shade: [0.2, '#fff']
            });

            $.ajax({
                url: "/Api/Settings/SyncMember",
                type: "POST",
                dataType: "json",
                success: function (data, status, jqXHR)
                {
                    // alert(data);

                    layer.close(loadLayerIndex);

                    if (data.Success)
                    {
                        $("#divSyncUserList").html("<span>正在同步用户列表...</span>");
                        layerAlert("服务器正在同步您的用户列表；<br/>您无需停留在此页面等待，这一任务是服务器自动执行的。");
                    } else
                    {
                        layerAlert(data.Message);
                    }
                },
                error: function (xmlHttpRequest)
                {
                    layer.close(loadLayerIndex);
                    alert("Error: " + xmlHttpRequest.status);
                }
            });
        });
    }

    //0、46、64、96、132数值可选，0代表640*640正方形头像
    function fitHeadImage(url, size)
    {

        if (url == undefined || url == null || url == "")
            return "";

        url = url.substr(0, url.length - 1);
        url = url + size;
        return url;
    }

    function createMemberGroup()
    {
        layer.open({
            type: 2,
            area: ['500px', '190px'], //宽高
            closeBtn: false,
            title: "",
            shift: _layerShift,
            content: 'MemberGroupEdit'
        });
    }

    function modifyMemberGroup()
    {
        layer.open({
            type: 2,
            area: ['500px', '190px'], //宽高
            closeBtn: false,
            title: "",
            shift: _layerShift,
            content: 'MemberGroupEdit?id=' + _currentGroupGuid
        });
    }

    function removeMemberGroup()
    {
        var confirmLayerIndex = layer.confirm("是否确认删除该分组？", {
            btn: ['确认', '取消'], //按钮
            shade: [0.4, '#393D49'],
            title: false,
            closeBtn: false,
            shift: _layerShift
        }, function ()
        {
            layer.close(confirmLayerIndex);

            var loadLayerIndex = layer.load(0, {
                shade: [0.2, '#fff']
            });

            $.ajax({
                url: "/Api/Member/RemoveMemberGroup?id=" + _currentGroupGuid,
                type: "POST",
                dataType: "json",
                success: function (data, status, jqXHR)
                {
                    layer.close(loadLayerIndex);
                    if (data.Success)
                    {
                        selectMemberGroup("", -1, "全部用户");
                        loadMemberGroupList();

                    } else
                    {
                        layerAlert(data.Message);
                    }
                },
                error: function (xmlHttpRequest)
                {
                    layer.close(loadLayerIndex);
                    alert("Error: " + xmlHttpRequest.status);
                }
            });
        });
    }

    function moveMemberToGroup(groupId)
    {
        if (groupId < 0)
            return;

        var args = new Object();
        args.OpenIdList = new Array();
        var n = 0;

        $("#tableBody input").each(function (index, element)
        {
            if ($(element).is(':checked'))
            {
               // alert($(element).attr("attention"));
                if ($(element).attr("attention") == "true")
                {
                    args.OpenIdList[n] = $(element).attr("openid");
                    n++;
                }
            }
        });

        if (args.OpenIdList.length == 0)
        {
            layerAlert("请选择会员。");
            return;
        }

        args.GroupId = groupId;

        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        $.ajax({
            url: "/Api/Member/MoveMemberListToGroup",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR)
            {
                layer.close(loadLayerIndex);
                if (data.Success)
                {
                    loadMemberList(_currentPage);

                } else
                {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest)
            {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function blockMember()
    {
        if (_currentGroupId == 1)
        {
            moveMemberToGroup(0);
        }
        else
        {
            var confirmLayerIndex = layer.confirm("加入黑名单后，你将无法接收粉丝发来的消息，且该粉丝无法接收到群发消息。确认加入黑名单？", {
                btn: ['确认', '取消'], //按钮
                shade: [0.4, '#393D49'],
                title: false,
                closeBtn: false,
                shift: _layerShift
            }, function ()
            {
                layer.close(confirmLayerIndex);

                moveMemberToGroup(1);
            });
        }
    }

    function loadMemberGroupListAndCloseLayer(layerIndex,groupName)
    {
        layer.close(layerIndex);
        if (groupName != undefined && groupName != null)
        {
            $("#spanCurrentGroupName").html(groupName);
        }

        loadMemberGroupList();
    }

    function showInfo(id) {
        layer.open({
            type: 2,
            area: ['600px', '100%'], //宽高
            closeBtn: false,
            title: "",
            shift: _layerShift,
            content: 'MemberInfo?id=' + id
        });
    }


</script>

<script id="memberGroupListTemplate" type="text/html">

    <div class="divGroupItem" onclick="selectMemberGroup('',-1, '全部用户')" {{# if(_currentGroupId == -1){ }}
         style="background-color:#eeeeee;"
         {{# } }}>
        全部用户
    </div>

    {{# for(var i = 0, len = d.length; i < len; i++){ }}

    {{# if(d[i].GroupId == 1){continue;} }}

    <div class="divGroupItem" onclick="selectMemberGroup('{{ d[i].Id }}',{{ d[i].GroupId }},'{{ d[i].Name }}')" {{# if(d[i].GroupId == _currentGroupId){ }}
         style="background-color:#eeeeee;"
         {{# } }}>
        <div style="margin-left:20px;">{{ d[i].Name }}</div>
    </div>
    {{# } }}

    <div class="divGroupItem" onclick="selectMemberGroup('', 1, '黑名单')" {{# if(_currentGroupId == 1){ }}
         style="background-color:#eeeeee;"
         {{# } }}>
        <div>黑名单</div>
    </div>

    <div class="divGroupItem" onclick="selectMemberGroup('', -2, '已取消关注')" {{# if(_currentGroupId == -2){ }}
         style="background-color:#eeeeee;"
         {{# } }}>
        <div>已取消关注</div>
    </div>

</script>

<script id="memberListTableTemplate" type="text/html">

    <table id="tableBody" border="0" cellspacing="0" cellpadding="0">

        {{# for(var i = 0, len = d.length; i < len; i++){ }}
        {{# var headimg = fitHeadImage(d[i].Headimgurl,46) }}
        <tr>
            <td height="50" align="left"><input type="checkbox" value="{{ d[i].Id }}" openid="{{ d[i].OpenId }}" attention="{{ d[i].Attention }}" /></td>
            <td><img src="{{headimg}}" /></td>
            @*onclick="showOrderDetail('{{ d[i].Id }}')"*@
            <td><a href="javascript:void(0)" onclick="showInfo('{{ d[i].Id }}')">{{ d[i].NickName }}</a></td>
            <td>{{ d[i].CardNumber }}</td>
            <td>
                {{# if(d[i].Name != null){ }}
                {{d[i].Name}}
                {{# } }}
            </td>
            <td>
                {{# if(d[i].Sex == 1){ }}
                男
                {{# }else if(d[i].Sex == 2){ }}
                女
                {{# }else if(d[i].Sex == 0){ }}
                未知
                {{# } }}
            </td>
            <td>
                {{# if(d[i].MobilePhone != null){ }}
                {{d[i].MobilePhone}}
                {{# } }}
            </td>
            <td>{{ d[i].Point }}</td>
            <td>{{ d[i].CashAccount/100 }}</td>
            <td>{{ d[i].City }}</td>
            <td>
                {{# if(d[i].Attention == true){ }}
                {{ d[i].SubscribeTime }}
                {{# }else{ }}
                已取消关注
                {{# } }}
            </td>
        </tr>
        {{# } }}

    </table>

</script>


<div id="divContentTips">
    查询当前关注公众号或之前关注过公众号的会员，并管理他们的会员卡级别和积分、现金账户。
</div>

<div style="margin-top:10px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td bgcolor="#F6F6F6">
                <div style="padding:10px;">
                    <table width="100%" border="0" cellspacing="0" cellpadding="8">
                        <tr>
                            <td width="60">昵称：</td>
                            <td width="220"> <input name="txtSearch_NickName" type="text" class="input_16" style="width:200px;" id="txtSearch_NickName" maxlength="30" keyenter /></td>
                            <td width="80">手机号码：</td>
                            <td width="220"><input name="txtSearch_Mobile" type="text" class="input_16" style="width:200px;" id="txtSearch_Mobile" maxlength="30" keyenter /></td>
                            <td>
                                <span style=" margin-top:20px;">
                                    <input name="btnSearch" type="button" class="btn_blue" id="btnSearch" value="查询" onclick="loadMemberList()" />
                                </span>
                            </td>
                            <td align="right">
                                <div id="divSyncUserList">
                                    @if (Model.DomainContext.SynchronizingUserList)
                                    {
                                        <span>正在同步用户列表...</span>
                                    }
                                    else
                                    {
                                        <input name="btnSyncUserList" type="button" class="btn_blue" id="btnSyncUserList" value="同步用户列表"
                                               onclick="syncUserList()" />
                                    }
                                </div>
                            </td>
                        </tr>
                    </table>

                </div>
            </td>
        </tr>
        <tr style="height:5px;background-image:url(Images/searchArea_bottom.jpg);background-repeat: repeat-x;">
            <td></td>
        </tr>
    </table>

</div>

<div style="margin-top:20px;">

    <div style="float:left; line-height:30px;" class="font_black_18">
        <span id="spanCurrentGroupName">全部用户</span>
    </div>
    <div style="float:left;margin-left:10px;line-height:30px;">
        <a id="aRenameMemberGroup" href="javascript:void(0)" onclick="modifyMemberGroup()" class="a_blue_15" style="display:none">重命名</a>
    </div>
    <div style="float:left;margin-left:10px;line-height:30px;">
        <a id="aRemoveMemberGroup" href="javascript:void(0)" onclick="removeMemberGroup()" class="a_blue_15" style="display:none">删除</a>
    </div>
    <div style="float:left;margin-left:30px;">
        <select id="selectMemberGroupList" name="selectMemberGroupList" class="input_16" style="min-width:100px;">
            <option>添加到</option>
        </select>
    </div>
    <div style="float:left;margin-left:20px;">
        <input name="btnBlockMember" type="button" class="btn_white" id="btnBlockMember" value="加入黑名单" onclick="blockMember()" />
    </div>
    <div style="float:right">
        <input name="btnSearch" type="button" class="btn_blue" id="btnSearch" value="新建分组" onclick="createMemberGroup()" />
    </div>
    <div style="clear:both"></div>
</div>

<div style="margin-top:20px;">

    <div style="position:absolute; right:240px; left:0px;">
        <div>
            <div style="overflow:hidden; padding-left:20px;" class="tableHeader">

                <table id="tableHeader" border="0" cellspacing="0" cellpadding="0" width="1455" height="47">
                    <tr>
                        <td width="35"></td>
                        <td width="80"></td>
                        <td width="220">微信昵称</td>
                        <td width="220">会员卡号</td>
                        <td width="140">姓名</td>
                        <td width="80">性别</td>
                        <td width="170">手机号码</td>
                        <td width="80">积分</td>
                        <td width="100">现金余额</td>
                        <td width="140">城市</td>
                        <td width="200">关注时间</td>
                    </tr>
                </table>

            </div>

            <div style=" margin-top:10px">
                <!--div必须要设置height，否则滚动条出不来-->
                <div id="divTableBodyContainer" style="overflow:auto; height:100%;; padding-left:20px;" onscroll="scrollHeader()">
                </div>

            </div>

        </div>

        <div style="height:1px; margin-top:5px; background-color:#cccccc">

        </div>

        <div id="divPagingContainer" style=" margin-top:20px; margin-bottom:20px;text-align:right; ">

        </div>
    </div>

    <div style="float:right; width:200px; right:0px;">
        <div id="divMemberGroupListContainer">

        </div>
        @*<div class="divGroupItem">
                <div style="margin-left:20px;">默认组</div>
            </div>
            <div class="divGroupItem">
                <div style="margin-left:20px;">星标组</div>
            </div>
            <div class="divGroupItem" style="background-color:#eeeeee;">
                <div style="margin-left:20px;">新建组</div>
            </div>
            <div class="divGroupItem">
                <div>黑名单</div>
            </div>*@
    </div>

</div>
